<script setup lang="ts">
import { onMounted, onUnmounted, reactive } from 'vue';
import { useRouter } from 'vue-router';

interface notFoundType {
  seconds: number;
  timer: number | null;
}

const $router = useRouter();

let notFoundData = reactive<notFoundType>({
  seconds: 5,
  timer: null,
});

onMounted(() => {
  notFoundData.timer = setInterval(() => {
    if (notFoundData.seconds <= 0) {
      clearInterval(notFoundData.timer as number);
      $router.go(-1);
      return;
    }
    notFoundData.seconds -= 1;
  }, 1000);
});

onUnmounted(() => {
  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
  notFoundData.timer && clearInterval(notFoundData.timer);
});
</script>

<template>
  <div class="error">
    <div class="error-text">
      <div class="error-code">404</div>
      <div class="error-title">页面不存在</div>
      <van-button @click="$router.go(-1)" color="#4a5dff" block>
        {{ notFoundData.seconds }} 秒后返回上一页
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.error {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  .error-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 250px;
  }

  .error-title {
    margin: 0 0 40px 0;
  }

  .error-code {
    color: #4a5dff;
    font-size: 50px;
    margin: 0;
  }

  :deep(.van-button) {
    height: 40px;
  }
}
</style>
